<template>
    <el-table :data="data" style="width: 100%" v-loading="loading" stripe border>
        <el-table-column prop="deviceId" label="设备ID" width="100" align="center"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称" width="150" align="center"></el-table-column>
        <el-table-column label="温度(℃)" width="150" align="center">
            <template #default="{ row }">
                <span :class="{ 'warning-text': !isTempNormal(row) }">
                    {{ row.temperature }}
                </span>
            </template>
        </el-table-column>
        <el-table-column label="电压(V)" width="150" align="center">
            <template #default="{ row }">
                <span :class="{ 'warning-text': !isVoltageNormal(row) }">
                    {{ row.voltage }}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" align="center"></el-table-column>

        <el-table-column label="操作" width="180" align="center" fixed="right">
            <template #default="{ row }">
                <el-button type="info" size="small" @click="showDetail(row)">
                    详情
                </el-button>
                <el-button type="warning" size="small" @click="handleEdit(row)">
                    修改
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="showImageDialog" title="巡检图片" width="60%">
        <el-carousel :interval="4000" type="card" height="400px" v-if="currentImages.length > 0">
            <el-carousel-item v-for="(img, index) in currentImages" :key="index">
                <el-image :src="img.url" :preview-src-list="currentImages.map(i => i.url)" fit="contain"
                    style="width: 100%; height: 100%"></el-image>
            </el-carousel-item>
        </el-carousel>
        <el-empty description="暂无图片" v-else></el-empty>
    </el-dialog>
    <!-- 详情对话框 -->
    <el-dialog v-model="showDetailDialog" :title="`巡检详情 - ${currentDetail.deviceName || ''}`" width="70%">
        <el-descriptions :column="2" border>
            <el-descriptions-item label="设备ID">{{ currentDetail.deviceId }}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{ currentDetail.deviceName }}</el-descriptions-item>
            <el-descriptions-item label="巡检温度">
                <span :class="{ 'warning-text': !isTempNormal(currentDetail) }">
                    {{ currentDetail.temperature }} ℃
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="巡检电压">
                <span :class="{ 'warning-text': !isVoltageNormal(currentDetail) }">
                    {{ currentDetail.voltage }} V
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="巡检时间">{{ currentDetail.createTime }}</el-descriptions-item>
            <el-descriptions-item label="巡检描述" :span="2">
                <div style="white-space: pre-line;">{{ currentDetail.description }}</div>
            </el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider>
        <h4>巡检图片</h4>
        <div class="image-preview-container" v-if="currentImages.length > 0">
        <el-image 
          v-for="(img, index) in currentImages" 
          :key="index"
          :src="img.url" 
          :preview-src-list="currentImages.map(i => i.url)"
          fit="contain"
          style="width: 100%; height: 400px; margin-bottom: 10px;"
          hide-on-click-modal
        ></el-image>
      </div>
        <el-empty description="暂无图片" v-if="!currentImages || currentImages.length === 0"></el-empty>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog v-model="showEditDialog" :title="`编辑巡检记录 - ${currentEdit.deviceName || ''}`" width="50%">
        <el-form :model="currentEdit" label-width="100px">
            <el-form-item label="巡检温度(℃)">
                <el-input-number v-model="currentEdit.inspectionTemp" :precision="2" :step="0.1" />
            </el-form-item>
            <el-form-item label="巡检电压(V)">
                <el-input-number v-model="currentEdit.inspectionVoltage" :precision="2" :step="0.1" />
            </el-form-item>
            <el-form-item label="巡检描述">
                <el-input v-model="currentEdit.description" type="textarea" :rows="5" placeholder="请输入巡检描述"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="showEditDialog = false">取消</el-button>
            <el-button type="primary" @click="confirmEdit">保存</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import { updateInspection } from '@/api/user'
import { getImage } from '@/api/inspection'
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
    loading: {
        type: Boolean,
        default: false
    }
})

const showImageDialog = ref(false)
const currentImages = ref([])

// 检查温度是否正常
const isTempNormal = (row: any) => {
    const { normalTemp, inspectionTemp } = row
    const lower = normalTemp - 5
    const upper = normalTemp + 5
    return inspectionTemp >= lower && inspectionTemp <= upper
}

// 检查电压是否正常
const isVoltageNormal = (row: any) => {
    const { normalVoltage, inspectionVoltage } = row
    const lower = normalVoltage * 0.9
    const upper = normalVoltage * 1.1
    return inspectionVoltage >= lower && inspectionVoltage <= upper
}


const emit = defineEmits(['update'])

const showDetailDialog = ref(false)
const showEditDialog = ref(false)
const currentDetail = ref<any>({})
const currentEdit = ref<any>({})

// 显示详情
const showDetail = (row: any) => {
    currentDetail.value = { ...row }
    getImage(row.id).then(res => {
    currentImages.value = res.data.map((img :any) => {
      return {
        id: img.id,
        url: img.url  // 直接使用后端返回的图片URL
      }
    })
  })
    showDetailDialog.value = true
}

// 编辑记录
const handleEdit = (row: any) => {
    currentEdit.value = { ...row }
    showEditDialog.value = true
}

// 确认编辑
const confirmEdit = async () => {
    try {
        await updateInspection(currentEdit.value)
        ElMessage.success('修改成功')
        showEditDialog.value = false
        emit('update')
    } catch (error) {
        ElMessage.error('修改失败')
    }
}
</script>

<style scoped>
.warning-text {
    /* color: #e6a23c; */
    font-weight: bold;
}
.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .image-preview-container {
  display: flex;
  flex-direction:row;
  align-items: center;
}
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
</style>